<template>
  <view class="container">
    <HeadNav title="我的店铺" back />
    <scroll-view scroll-y class="scroll-height" @scrolltolower="getData">
      <view class="list-bar-bg">
        <view class="list-bar">
          <view
            class="list-item"
            @tap.stop="onActivityItem2(item)"
            v-for="item of dataList"
            :key="item.id"
          >
            <view class="list-item-left">
              <image class="product-item-img" :src="item.storeLogoFileUrl">
              </image>
            </view>
            <view class="list-item-right">
              <view class="list-item-title list-item-text">
                {{ item.storeName }}
              </view>
              <view
                class="list-item-type list-item-text"
                style="margin: 6rpx 0"
              >
                <text class="item-tag">{{ item.storeTags }}</text>
              </view>
              <view class="list-item-address list-item-text">
                <view class="item-content-box">
                  <uni-icons type="location" size="20"></uni-icons>
                  {{ item.address }}
                </view>
              </view>
            </view>
            <view class="state-bar">
              <view
                class="apply-state-box"
                :class="showStatusColor(item.auditStatus)"
              >
                <view class="apply-state">
                  {{ item.auditStatusText }}
                </view>
              </view>
              <template
                v-if="item.auditStatus === '2' && item.storeStatus !== '2'"
              >
                <text class="edit-text" @tap.stop="handleEdit(item.id)"
                  >修改店铺</text
                >
                <text class="delete-text" @tap.stop="handleDelete(item.id)"
                  >删除店铺</text
                >
              </template>

              <!-- <text class="delete-text" v-if="item.auditStatus === '2' && item.storeStatus !=='2'"
							@tap.stop="handleDelete(item.id)">删除店铺</text> -->
              <text
                class="delete-text"
                v-else-if="item.auditStatus === '2' && item.storeStatus === '2'"
                style="color: #f3a73f"
                >删除审核中</text
              >
            </view>
          </view>
        </view>
      </view>

      <uni-load-more v-if="showLoadMore" :status="pagination.loadingStatus" />
    </scroll-view>
    <view class="button-bar">
      <view class="button-bar-btn" @tap="redirectRegister"> 登记店铺 </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import HeadNav from '@/components/HeadNav'
import { myStoreListApi } from '@/api/store'

const pagination = reactive({
  page: 0,
  size: 10,
  keywords: '',
  loadingStatus: '',
  pageLimit: false
})
const showLoadMore = ref(true)
const dataList = ref([])

// onLoad(() => {
// 	getData()
// })
onShow(() => {
  clarParams()
  getData()
})

const getData = async () => {
  if (pagination.pageLimit) return
  pagination.page++

  const params = {
    pageNum: pagination.page,
    pageSize: pagination.size
  }

  showLoadMore.value = true
  pagination.loadingStatus = 'loading'
  pagination.pageLimit = true

  try {
    const res = await myStoreListApi(params)
    dataList.value = dataList.value.concat(res.rows)

    if (dataList.value.length === 0) {
      // 查不到数据
      pagination.pageLimit = true
      pagination.loadingStatus = 'noMore'
    } else if (pagination.page * pagination.size >= res.total) {
      pagination.pageLimit = true
      showLoadMore.value = false
    } else {
      pagination.loadingStatus = 'more'
      pagination.pageLimit = false
    }
  } catch (error) {
    console.log(error)
    pagination.pageLimit = false
  }
}

const showStatusColor = status => {
  switch (status) {
    case '1':
      return {
        inreview: true
      }
    case '2':
      return {
        passed: true
      }
    default:
      return {
        fail: true
      }
  }
}

const onActivityItem2 = item => {
  if (item.auditStatus === '2') {
    // 审核通过才进入详情
    uni.navigateTo({
      url: '/pages/my/my-storedetail?id=' + item.id
    })
  } else if (item.auditStatus === '3') {
    // 审核不通过，进入重新登记
    uni.navigateTo({
      url: '/pages/my/register-store?id=' + item.id + '&auditStatus=3'
    })
  } else {
    uni.navigateTo({
      url: '/pages/my/register-store?id=' + item.id
    })
  }
}

const redirectRegister = () => {
  uni.navigateTo({
    url: '/pages/my/register-store'
  })
}
const handleDelete = id => {
  uni.navigateTo({
    url: '/pages/my/delete?pageType=store&id=' + id
  })
}

const handleEdit = id => {
  uni.navigateTo({
    url: '/pages/my/edit-store?id=' + id
  })
}

const clarParams = () => {
  pagination.page = 0
  pagination.pageLimit = false
  dataList.value = []
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #ebebeb;
  height: 100vh;
}

.scroll-height {
  // max-height: calc(100vh - 70rpx - 50rpx - env(safe-area-inset-bottom));
  max-height: 79vh;
  .list-bar-bg {
    padding: 24rpx;
    box-sizing: border-box;
  }
}

.list-bar {
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #fff;

  .list-item {
    display: flex;
    font-family: PingFangSC-Regular, sans-serif;
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 12rpx;
    padding-left: 24rpx;
    position: relative;
    border: 12rpx solid #eae9e6;
    border-left: 0;
    border-radius: 12rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-r.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    &::before {
      content: '';
      position: absolute;
      top: -12rpx;
      left: 0;
      width: 12rpx;
      height: calc(100% + 24rpx);
      background-color: #d0ccc2;
    }

    .list-item-left {
      width: 36%;
      height: 240rpx;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-l.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16rpx;

      image {
        width: 89%;
        height: 93%;
      }

      // .product-item-img.no-image {
      // 	width: 100%;
      // 	height: 100%;
      // 	background-color: $no-image-color;
      // }
    }

    .list-item-right {
      // flex: 1;
      width: 45%;
      display: flex;
      flex-direction: column;
      //   justify-content: center;
      border: 2rpx solid #f9f7f4;
      border-left: 0;
      border-right: 0;

      .list-item-text {
        line-height: 44rpx;
        font-size: 28rpx;
        // margin-bottom: 16rpx;
      }

      .list-item-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #bda364;
      }

      .item-tag {
        display: inline-block;
        background-color: #d16a5a;
        color: #fff;
        padding: 4rpx 8rpx;
        word-break: break-all;
      }

      .item-content-box {
        display: flex;
        align-items: center;
        gap: 8rpx;
      }
    }

    .state-bar {
      min-height: 160rpx;
      width: 33%;
      display: flex;
      flex-direction: column;
      gap: 40rpx;
      border-bottom: 2rpx solid #f9f7f4;

      // justify-content: space-between;
      .edit-text {
        color: #2979ff;
        font-size: 28rpx;
        text-align: center;
      }

      .delete-text {
        color: #e43d33;
        font-size: 28rpx;
        text-align: center;
      }
    }

    .apply-state-box {
      height: 55rpx;
      padding: 4rpx;
      // box-sizing: border-box;
      border: 2rpx solid;
      border-radius: 32rpx;
      width: auto;

      .apply-state {
        height: 100%;
        border-radius: 32rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 2rpx;
        font-size: 28rpx;
      }

      &.inreview {
        border-color: #4193ff;

        .apply-state {
          background-color: #4193ff;
        }
      }

      &.passed {
        border-color: #2db185;

        .apply-state {
          background-color: #2db185;
        }
      }

      &.fail {
        border-color: #fe4c4f;

        .apply-state {
          background-color: #fe4c4f;
        }
      }
    }
  }
}

.button-bar {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: calc(20rpx + env(safe-area-inset-bottom));

  .button-bar-btn {
    font-family: PingFangSC-Regular, sans-serif;
    background-color: #333;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    border-radius: 12rpx;
    letter-spacing: 2rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg2.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}
</style>
